<template>
  <div class="order-list-box">
    <h3 class="h3">{{title}} list</h3>
    <ul class="list-box">
      <li class="li clearfix" v-for="(item, index) in listData" :key="index" >
        <div class="img-box">
          <img v-lazy="imgUrl+ item.image.src + '?x-oss-process=image/resize,h_200,limit_0'" ref="imgs" alt="" class="img">
        </div>
        <div class="goods-info">
          <h4 class="h4">{{item.headLine}}</h4>
          <p class="goods-type">{{attriubteDefine(item.productAttributes)}}</p>
          <div class="num-box"><span>Qty:</span><span class="num">1</span></div>
        </div>
        <div class="price-show">
          <p class="price1">${{item.price}}</p>
          <p class="price2"><span class="old-price">${{item.originalPrice}}</span> <span class="rebate-price">Rebate ${{item.totalRebate.amount}}</span></p>
          <p class="time" :class="{'show-time': isShowTime}">
              <time-down @time-end="timeEnd" :endTime="item.lastModifiedTime" :upTime="true"></time-down>
          </p>
          <button class="btn block-bg" :class="{'red-bg':item.orderStatus === 'Rejected' ||item.orderStatus === 'Requested','move-middle' : !isShowTime}" @click="selectItem(item)">{{btnText}}</button>
        </div>
      </li>
      <li class="loading-container" v-show="Loading">
          <loading></loading>
      </li>
      <li v-show="noData" class="no-result-wrapper" ref="noDataEl">
        <no-data-show></no-data-show>
      </li>
    </ul>
  </div>
</template>

<script type="text/ecmascript-6">
  import {mapMutations,mapActions} from 'vuex'
  import NoDataShow from "../../base/no-data-show/no-data-show";
  import Loading from 'base/loading/loading'
  import TimeDown from 'base/countdown/countdown'
  import {getCategory} from 'common/js/dom'
    export default {
      props: {
        listData :{
          type: Array,
          default: null
        },
        title : {
          type: String,
          default:''
        },
        isShowTime :{
          type: Boolean,
          default: false,
        },
        nextPage:{
          type: String,
          default: '/my-order/cashback'
        },
        mapMutationsWay :{
          type:String,
          default:'SET_ORDERNO'
        },
        btnText:{
          type:String,
          default:'view'
        },
        noData:{
          type:Boolean,
          default:false,
        },
        Loading:{
          type:Boolean,
          default:false
        }
      },
      data(){
          return{
            imgUrl : imgUrl
          }
      },
      mounted(){

      },
      methods: {
        timeEnd() {

        },
        attriubteDefine : function(productAttributes){ //商品属性拼接
          let str = ''
          if(productAttributes.length === 0){
            return str
          }
          productAttributes.forEach(function(item,index){
            str += item.value+'/'
          })
          str = str.substring(0,str.length-1);
          return str
        },
        selectItem(item) {
          let headLine = item.urlKeyWords || 'dp'
          if(this.nextPage === 'guide'){
            this.setRequest(item)
            this.$router.push({
              path: `/guide/${headLine}/${item.orderNo}`
            });
          }else{
            this.setOrder(item.orderNo)
            let pathNext =this.nextPage + '/'+headLine + '/' + item.orderNo
            this.$router.push({
              path: pathNext
            });
          }
        },
        ...mapMutations({
          setOrder: 'SET_ORDERNO' ,
          setRequest:'SET_MYREQUEST'
        }),
      },
      computed:{

      },
      components:{
        NoDataShow,
        Loading,
        TimeDown,
      },
      watch:{

      }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .order-list-box
    width:100%
    border:1px solid #dcdcdc
    .h3
      height: 40px;
      line-height:40px
      background-color: #f6f7f8;
      padding-left:18px;
      font-size:18px;
      color:#333
    .list-box
      .li
        padding: 20px 30px 20px 20px;
        border-top:1px solid #dcdcdc
        font-size: 18px;
        display:flex
        .img-box
          width: 250px
          padding-right:30px;
          background #fff
          text-align center
          .img
            max-width:250px
            max-height:184px
            vertical-align: middle;
        .goods-info
          color:#333
          flex 1
          .h4
            width:100%;
            line-height:30px
            font-size: 18px;
            text-overflow: -o-ellipsis-lastline;
            text-overflow: ellipsis;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            height: 55px;
          .goods-type
            font-size 14px;
            color:#bbb
            margin-top: 14px;
            height: 15px;
          .num-box
            margin-top:45px;
            font-size: 20px;
            span
              vertical-align middle
            .num
              margin-left: 15px;
        .price-show
          width:250px
          text-align right
          color:#333
          .price1
            font-size:30px
            line-height:50px
          .price2
            margin-top: 5px;
            font-size: 20px;
            .old-price
              margin-right:15px;
              text-decoration:line-through
              color:#a1a0a0
            .rebate-price
              color:#fa4c4d
          .time
            line-height: 58px;
            font-size:16px;
            display: none
          .show-time
            display: block
          .btn
            width: 160px;
            height: 53px;
            color:#fff
            border:none
            font-size:18px
            border-radius: 2px
            cursor:pointer
          .block-bg
            background-color: #000
          .red-bg
            background-color:#fa4c4d
          .move-middle
            margin-top: 34px;
  .no-result-wrapper
    width: 100%
    height:100%
  .loading-container
    width: 100%
    height: 276px;
    padding-top: 192px;




</style>
